<template>
    <div class="leader-board">
        <div class="main">
            <div class="inner">
                <div class="header">
                    <CommonNav :navs="navs" v-model="nav" color="grey" />
                    <div class="select-box">
                        <!-- style="width:100%!important;" -->
                        <SelectShop v-model="selectedShops" :options="shopList" />
                    </div>
                    <div class="select-box">
                        <ZbSelect v-model="selectedDealType" type="mini" :options="dealTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#F4051A" selected-bg="#F4051A" />
                        <ZbSelect v-model="selectedDateType" type="mini" :options="dateTypeOptions" :hasBr="true" default-br="#101010" default-color="#101010" selected-color="#FFFFFF" selected-br="#F4051A" selected-bg="#F4051A" />
                    </div>
                </div>

                <div class="list" v-if="rankList.length">
                    <div class="item position-relative before-line" v-for="(item, index) in rankList" :key="item.nickname">
                        <div class="inner-box">
                            <div class="avatar">
                                <img class="border-round" :src="item.avatar" mode="aspectFill" />
                            </div>
                            <div class="info">
                                <div class="name text-large">
                                    <span>{{item.name}}&nbsp;</span>
                                    <span class="grey-color text-small">邀请人：{{item.referrer ? item.referrer : '无邀请人'}}</span>
                                </div>
                                <div class="rank grey-color text-small">第{{index + 1}}名</div>
                            </div>
                        </div>
                        <div class="count text-large color-red">
                            <span v-if="selectedDealType === '成交总额'">{{item.score | currencyPreserve}}元</span>
                            <span v-else>{{item.score}}单</span>
                        </div>
                    </div>
                </div>
                <ListEmpty v-else />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import CommonNav from '@/components/nav/commonNav.vue';
import ZbSelect from '@/components/common/zbSelect.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import store from '@/store';
import { getRankKey } from '@/lib/utils';
import { Component, Vue, Watch } from 'vue-property-decorator';
import SelectShop from '@/features/manage/select.vue';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'LeaderBoard',
    components: {
        SelectShop,
        CommonNav,
        ZbSelect,
        ListEmpty,
    },
})
export default class LeaderBoard extends Vue {
    public shopId: number | null = null;
    public nav: any = '3';
    public navs: any = [
        { text1: '员工推荐', value: '3' },
        { text1: '城市合伙人推荐', value: '2' },
        { text1: '返利会员推荐', value: '1' },
    ];
    public selectedDateType = '月度';
    public dateTypeOptions: string[] = [ '月度', '季度', '年度' ];
    public dateTypes: any = {
        月度: 'monthly',
        季度: 'quarterly',
        年度: 'annual',
    };
    public selectedDealType: any = '成交总额';
    public dealTypeOptions: string[] = [ '成交总额', '成交单量' ];
    public dealTypes: any = {
        成交总额: 'money',
        成交单量: 'number',
    };
    public selectedShops: any = [];

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    public get rankListMap() {
        return store.state.manage.rankListMap;
    }
    public get rankKey() {
        return getRankKey({
            level: this.nav,
            interval: this.dateTypes[this.selectedDateType],
            type: this.dealTypes[this.selectedDealType],
        });
    }
    public get rankList() {
        return this.rankListMap[this.rankKey] ? this.rankListMap[this.rankKey].list : [];
    }
    public get list() {
        return ([ { id: null, name: '全部' } ] as IdName[]).concat(this.userBasicInfo.shop);
    }
    public get shopMap() {
        return store.state.shop.shopMap;
    }
    public get allShopList() {
        return store.state.shop.allShopList;
    }
    /** 店铺列表 */
    public get shopList() {
        return this.allShopList.map((id: any) => this.shopMap[id]);
    }

    @Watch('nav')
    public onNavChange() {
        this.getList(true);
    }
    @Watch('selectedDealType')
    public onSelectedDealTypeChange() {
        this.getList(true);
    }
    @Watch('selectedDateType')
    public onSelectedDateTypeChange() {
        this.getList(true);
    }
    @Watch('shopId')
    public onShopId() {
        this.getList(true);
    }
    @Watch('selectedShops')
    public onSelectedShopsChange(val: any) {
        this.getList(true);
    }

    public onChange(e: { detail: { value: number } }) {
        const index = e.detail.value;
        this.shopId = this.userBasicInfo.shop[index].id;
    }
    public async getList(forceUpdate = false) {
        await store.dispatch('manage/getRankList', {
            offset: forceUpdate ? 0 : this.rankList.length,
            shopId: this.selectedShops.length ? this.selectedShops : null,
            count: 10,
            level: this.nav,
            interval: this.dateTypes[this.selectedDateType],
            type: this.dealTypes[this.selectedDealType],
            forceUpdate,
        });
    }
    async onReachBottom() {
        this.getList();
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await store.dispatch('shop/getAllShopList');
        store.commit('utils/endRequest');
        next();
    }
    public created() {
        this.shopId = this.userBasicInfo.shop[0].id;
        this.getList(true);
        window.addEventListener('reachbottom', this.onReachBottom);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.leader-board {
    min-height: 100%;

    &__filter {
        padding: 10px 15px;
        .text-normal();
    }
    .component-select-box-a {
        width: 100%;
    }

    .main {
        padding: 10px 5px 0;
        .inner {
            padding: 0 5px;
            background-color: #f8f8f8;
        }
        .select-box {
            display: flex;
            justify-content: space-between;
            margin-top: 10rpx;
        }
        .list {
            padding: 0 10px;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;
                &:not(:last-child) {
                    border-bottom: 2rpx solid #ebebeb;
                }
                .inner-box {
                    display: flex;
                    align-items: center;
                }
                .avatar {
                    width: 100rpx;
                    height: 100rpx;
                    margin-right: 10px;
                }
                .info {
                    flex: 1;
                }
                image {
                    width: 100%;
                    height: 100%;
                }
                .count {
                    white-space: nowrap;
                }
            }
        }
    }
}

</style>
